<template>
  <div class="layout-table">
    <h3>编辑课程内容</h3>
    <div class="layout-table-button">
      <el-button type="primary" @click="toPath('CourseContentList')">返回课程列表</el-button>
    </div>

    <div class="content">

      <el-form :model="courseDetail" :rules="rules" ref="courseDetail" label-width="100px">


        <el-row>
          <el-col :span="12">
            <el-form-item label="是否团辅" prop="isTuanFu">
              <el-tooltip :content="'是否是团辅(1:是，0:否) 当前状态为: ' + courseDetail.isTuanFu " placement="top">
                <el-switch
                    v-model="courseDetail.isTuanFu"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0"
                    disabled
                    @change="changeData()"
                >
                </el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="课程ID" prop="courseId">
              <el-select v-model="courseDetail.courseId" placeholder="请选择" @change="getChapterList()">
                <el-option
                    v-for="item in courseIdList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="this.courseDetail.isTuanFu <= 0">
          <el-col :span="12">
            <el-form-item label="章节ID" prop="chapterId">
              <!--            <el-input v-model="courseDetail.chapterId"></el-input>-->
              <el-select v-model="courseDetail.chapterId" placeholder="请选择">
                <el-option
                    v-for="item in idList"
                    :key="item.id"
                    :label="item.chapterName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row v-if="this.courseDetail.isTuanFu <= 0">
          <el-col :span="12">
            <el-form-item label="小节名称" prop="periodName">
              <el-input v-model="courseDetail.periodName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="this.courseDetail.isTuanFu <= 0">
          <el-col :span="12">
            <el-form-item label="小节序号">
              <el-input v-model="courseDetail.periodSort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="课程内容" prop="courseDetailInfo">
              <tinymce-editor ref="editor"
                              v-model="courseDetail.courseDetailInfo"
                              :disabled="false"
                              :language="language"
                              :skin="skin">
              </tinymce-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="this.courseDetail.isTuanFu > 0">
          <el-col :span="12">
            <el-form-item label="团辅资料" prop="filepath">
              <el-upload
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  :auto-upload="true"
                  :http-request="fileUpload"
                  multiple
                  :limit="3"
                  action="customize">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">请上传pdf格式的文件</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="text-align:center;margin:20px 0;">
          <el-col :span="12">
            <el-button type="primary" @click="submitForm('ruleForm')"  :loading="loading">提交</el-button>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="HTML预览">
              {{courseDetail.courseDetailInfo}}
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

    </div>
  </div>
</template>

<script>
import TinymceEditor from '@/components/tinymce-editor'
import {chapterList, courseList, courseContentDetail, updateCourseContent, fileUpload} from '@/api/api'


export default {
  name: 'EditCourseContent',
  data() {
    return {
      language: 'zh_CN',
      skin: 'oxide',
      courseDetail: {
        courseId: '',
        chapterId:'',
        chapterName: '',
        chapterSort: '',
        periodName: '',
        periodSort: '',
        courseDetailInfo: '',
        isTuanFu: '0',
        periodId: '',
        id: '',
        courseDetail:'',
        filepath: null
      },
      rules: {
        isTuanFu: [
          { required: true, message: '请输入选择是否是团辅', trigger: 'blur' }
        ],
        courseId: [
          { required: true, message: '请输入课程id', trigger: 'blur' }
        ],
        chapterId: [
          { required: true, message: '请输入章节id', trigger: 'blur' }
        ],
        chapterName: [
          { required: false, message: '请输入章节名称', trigger: 'blur' }
        ],
        chapterSort: [
          { required: false, message: '请输入章节排序', trigger: 'blur' }
        ],
        periodName: [
          { required: true, message: '请输入小节名称', trigger: 'blur' }
        ],
        periodSort: [
          { required: true, message: '请输入小节排序', trigger: 'blur' }
        ],
        courseDetailInfo: [
          { required: true, message: '请输入课程内容', trigger: 'blur' }
        ]
      },
      courseIdList:[],
      idList:[],
      loading: false,
      fileList: []
    }
  },
  components: {
    TinymceEditor
  },
  created() {

    this.courseDetail.periodId = this.$route.query.periodId
    this.courseDetail.courseId = this.$route.query.courseId
    this.courseDetail.periodName = this.$route.query.periodName
    this.courseDetail.id = this.$route.query.id
    this.courseDetail.courseDetail = this.$route.query.courseDetail

    if(this.courseDetail.courseId == this.courseDetail.periodId){
      // 团辅
      this.courseDetail.isTuanFu = '1'
    }

    // 课程列表
    this.getCourseList()

    // 章列表
    this.getChapterList()

    // 课程详情
    this.getCourseContentDetail()

  },
  methods: {
    submitForm(){
      this.$refs.courseDetail.validate((valid) => {

        if (valid) {

          let param = {
            ...this.courseDetail
          }

          updateCourseContent(param).then(res=>{
            if(res.code == 200){
              this.$message.success("修改成功 !!! ")
              this.$router.push({path:'/CourseContentList'})
            }else{
              this.$message.error("修改失败 !!! ")
            }
          })
        }
      });

    },
    getChapterList(){

     const content = this.courseDetail.courseDetailInfo
      this.courseDetail.courseDetailInfo = ''
      let param = {
        ...this.courseDetail
      }
      chapterList(param).then(res =>{
        if(res.code == 200){
          this.courseDetail.chapterId = null
          this.idList = res.data
          // this.$message.success("请求成功 !!! ")
        }else{
          this.$message.error("请求失败 !!! ")
        }
      })
      this.courseDetail.courseDetailInfo = content
    },
    toPath(value){
      this.$router.push({
        path:'/'+value
      })
    },
    getCourseList(){

      let param = {
        ...this.courseDetail
      }

      courseList(param).then(res =>{
        if(res.code == 200){
          this.courseIdList = res.data
          // this.$message.success("请求成功 !!! ")
        }else{
          this.$message.error("请求失败 !!! ")
        }
      })

    },
    changeData(){
      const oldData = this.courseDetail.isTuanFu
      this.getCourseList()
      this.$refs.courseDetail.resetFields()
      this.courseDetail.isTuanFu = oldData
    },
    getCourseContentDetail(){

      courseContentDetail({periodId: this.courseDetail.periodId}).then(res =>{
        if(res.code == 200){
          this.courseDetail.chapterId = res.data.chapterId
          this.courseDetail.courseDetailInfo = res.data.courseDetailInfo
          this.fileList  = res.data.filepath
          this.courseDetail.filepath = this.fileList

        }else{
          this.$message.error("请求失败 !!! ")
        }
      })
    },
    fileUpload(params){

      const formData = new FormData();
      formData.append("file", params.file);

      const uid = params.file.uid
      const fileName = params.file.name

      fileUpload(formData).then( res =>{
        if (res.code == 200){
          this.fileList.push({name: fileName,url: res.data.fileUrl,uid: uid})
          this.courseDetail.filepath =  this.fileList
        }
      })

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      for (const i in this.fileList) {
        if (this.fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
          console.log(this.fileList)
        }
      }
    },
  }
}
</script>

<style>

.content{
  margin: 10px 0px 0px 300px;
}

</style>
